<article>
 <style scoped>
  video { transform: scaleX(-1); }
  p { text-align: center; }
 </style>
 <h1>Snapshot Kiosk</h1>
 <section id="splash">
  <p id="errorMessage">Loading...</p>
 </section>
 <video id="video" autoplay=""></video>
<script>
var video_element=document.getElementById('video');
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
      navigator.getUserMedia('video',success,error);  //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
     video_element.src=stream;
}
function scamera() {
                var videoElement = document.getElementByIdx_x_x('video');
                var canvasObj = document.createElement('canvas');
                var context1 = canvasObj.getContext('2d');
                context1.fillStyle = "#ffffff";
                context1.fillRect(0, 0, 320, 240);
                context1.drawImage(videoElement, 0, 0, 320, 240);
                document.body.append(canvas);
            }
</script>
</article>